<template>
  <el-drawer title="异常数据" :visible.sync="table" direction="rtl" size="40%">
    <el-table :data="bgAlarmList.records" style="width: 100%">
      <el-table-column label="日期" width="230">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.gmtCreate.replace('T', ' ') }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="deviceName" label="设备名" width="130"></el-table-column>
      <el-table-column prop="alarmBg" label="血糖" width="130"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="bgAlarmList.size"
        layout="total, prev, pager, next"
        :total="bgAlarmList.total"
      ></el-pagination>
    </div>
  </el-drawer>
</template>

<script>
export default {
  name: 'BgAlarmTable',
  props: ['getBgDeviceHistoryLog'],
  data() {
    return {
      bgAlarmList: [],
      table: false,
      currentPage: 1,
    }
  },
  mounted() {
    this.getBgAlarmHistoryLog()

    this.$bus.$on('isTable', item => {
      this.table = item
    })
  },
  methods: {
    handleCurrentChange(val) {
      this.currentPage = val
      this.getBgAlarmHistoryLog()
    },
    handleDelete(_, row) {
      this.$http.post('/v1/bgAlarmHistoryLog/delete', row).then(() => {
        this.getBgAlarmHistoryLog()
        this.$emit('getBgDeviceHistoryLog')
        this.$bus.$emit('getDeviceStatus')
        this.$message({
          showClose: true,
          message: 'delete successfully',
          type: 'success',
        })
      })
    },
    getBgAlarmHistoryLog() {
      this.$http
        .get('/v1/bgAlarmHistoryLog/list', {
          params: {
            pageNum: this.currentPage,
          },
        })
        .then(res => {
          this.bgAlarmList = res.data
        })
    },
  },
}
</script>

<style scoped>
.block {
  margin-bottom: 15px;
  position: fixed;
  bottom: 0;
  margin-left: 150px;
}
</style>
